<template>
<!--  商品详情页-->
  <div id="GoodsDetails">
      <div id="goodsHeaderVessels">
        <div id="smallGoods">
          <img :src="goods.goodsSurfaceimg" alt="">
        </div>
        <div id="bigGoods">
          <img :src="goods.goodsSurfaceimg" alt="">
        </div>
        <div id="goodsMsgVessels">
<!--          商品名称-->
          <h3>{{goods.goodsName}}</h3>
<!--          商品介绍-->
          <div id="description">{{goods.goodsDecription}}</div>
<!--          商品价格-->
          <div class="sell-info">
            <div class="price">￥{{goods.goodsPrice}}</div>
            <div class="other">
              <span>月售：{{goods.goodsSales}}件</span>
              <span></span>
            </div>
          </div>
<!--          收货地址-->
          <el-dropdown class="desArea" @command="handleCommand" v-if="token !== null && token !== '' && token!== 'null'">
            <span class="el-dropdown-link">
              选择收货地址<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <router-link :to="{name: 'OrderAdress'}">
              <span class="addAddress">添加</span>
            </router-link>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in addArea" :key="item.addressId" :command="{
                addressId:item.addressId,
                province:item.province,
                city:item.city,
                district:item.district,
                detail:item.detail,
                receiver:item.receiver,
                mobile:item.mobile
              }">
                收货地址：{{item.province}}{{item.city}}{{item.district}}{{item.detail}} 收货人：{{item.receiver}} 联系方式：{{item.mobile}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
<!--          判断登录-->
          <div v-if="token === null || token === '' || token === 'null'" class="addressShow">请先登录</div>
<!--          收货地址-->
          <div v-else>
              <div class="addressShow" v-if="addArea.length === 0">
                当前还没有设置收货地址，点击上方添加按钮可添加收货地址
              </div>
            <div class="addressShow" v-if="addressMsg.addressId !== ''">
              收货地址：{{addressMsg.province}}{{addressMsg.city}}{{addressMsg.district}}{{addressMsg.detail}} 收货人：{{addressMsg.receiver}} 联系方式：{{addressMsg.mobile}}
            </div>
          </div>
<!--          收货地址详情-->
<!--          商品个数-->
          <div id="goodsNumber">
            <div id="numberVessels">
              <a @click="minus">-</a>
              <input type="text" readonly v-model="number">
              <a @click="add">+</a>
            </div>
            <div id="buyBtn" @click="buy()">
              立即购买
            </div>
          </div>
        </div>
      </div>
      <div id="comment">
        <div class="comment-upoload">
          <h3>留言：</h3>
          <div class="comment-text">
            <img :src="headImg" alt="">
            <textarea v-model="myWords"></textarea>
          </div>
          <button @click="submitMsg">发布留言</button>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsDetails',
  data () {
    return {
      token: this.$store.state.token,
      // 商品图片
      goods: {},
      id: '',
      number: 1,
      addArea: [],
      addressMsg: {
        addressId: '',
        province: '',
        city: '',
        district: '',
        detail: '',
        receiver: '',
        mobile: ''
      },
      myWords: '',
      headImg: 'https://i1.douguo.com/static/img/70.jpg'
      // goodsImg: '/img/goods.fd5c82a7.jpg',
      // goodsIntroduce: '独角兽暴肌厨房 黑麦面包无糖杂粮早餐整箱代餐低脂健身',
      // description: '60天短保 40%全麦粉+20%黑麦粉',
      // price: '39.60',
      // other: `<span>月售: 7箱</span>
      //         <span>发货地: 福建省厦门市</span>`,
      // number: 1
    }
  },
  mounted () {
    // console.log(this.token === 'null')
    this.id = this.$route.params.id
    this.$axios({
      url: '/Menu/Visitor/selectGoodsById',
      params: {
        goodsId: this.id
      }
    }).then(data => {
      // console.log(data)
      const { object } = data.data
      this.goods = object
    }).catch(err => {
      console.log(err.toString())
    })
    this.addAreas()
    if (this.$store.state.token !== undefined || this.$store.state.token !== '') {
      this.$axios({
        url: '/Menu/User/getUserInfo'
      }).then(data => {
        console.log(data.data)
        this.headImg = data.data.object.headImg
      }).catch(err => {
        console.log(err.toString())
      })
    }
  },
  methods: {
    // 添加
    add () {
      this.number++
    },
    // 减少
    minus () {
      if (this.number !== 1) {
        this.number--
      }
    },
    // 地区列表添加
    addAreas () {
      this.$axios({
        url: '/Menu/Address/list',
        method: 'post'
      }).then(data => {
        const { object } = data.data
        this.addArea = object
      }).catch(err => {
        console.log(err.toString())
      })
    },
    // 将地区遍历到页面
    handleCommand (command) {
      this.addressMsg = command
    },
    // 购买
    buy () {
      const { id } = this
      const { addressId } = this.addressMsg
      if (this.$store.state.token === undefined || this.$store.state.token === '') {
        this.$message('请先登录')
      } else if (id === '') {
        this.$message('没有找到该商品')
      } else if (addressId === '') {
        this.$message('请选择详细地区')
      } else {
        this.$axios({
          url: '/Menu/Order/generateOrder',
          method: 'post',
          params: {
            goodsId: this.id,
            goodsNumber: this.number,
            addressId: addressId
          }
        }).then(data => {
          // console.log(data)
          const msg = data.data
          if (msg.code === 200) {
            this.$message(msg.message)
            this.$message('跳转支付中')
            const order = msg.object
            this.pay(order).then(data => {
              window.location.href = data
            }).catch(err => {
              console.log(err.toString())
            })
          } else {
            this.$message(msg.message)
          }
        }).catch(err => {
          console.log(err.toString())
        })
      }
    },
    pay (id) {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/Order/payForOrder',
          method: 'post',
          params: {
            orderId: id
          }
        }).then(data => {
          // console.log(data)
          if (data.data.code === 200) {
            resolve(data.data.object)
          } else {
            this.$message(data.data.message)
          }
        }).catch(err => {
          reject(err)
        })
      })
    },
    submitMsg () {
      if (this.$store.state.token === undefined || this.$store.state.token === '') {
        this.$message('请先登录')
      } else {
        if (this.myWords.trim() === '') {
          this.$message('请输入你的留言')
        } else {
          this.$axios({
            method: 'post',
            url: '/Menu/User/sendMessage',
            params: {
              question: this.myWords,
              type: 1,
              extendId: this.id
            }
          }).then(data => {
            if (data.data.code === 200) {
              this.$message({
                type: 'success',
                message: '您的留言已提提交至平台，请留意消息提醒'
              })
              this.myWords = ''
            } else {
              this.$message(data.data.message)
            }
          }).catch(error => {
            console.log(error)
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
  #GoodsDetails{
    width: 1000px;
    margin: 0 auto;
    margin-top: 60px;
    #goodsHeaderVessels{
      width: 100%;
      padding-top: 30px;
      overflow: auto;
      img{
        width: 100%;
        height: 100%;
      }
      #smallGoods{
        width: 56px;
        height: 56px;
        float: left;
        border: 1px solid #FFB31A;
        margin-right: 10px;
        border-radius: 1px;
      }
      #bigGoods{
        width: 320px;
        height: 320px;
        float: left;
        background-color: #f4f4f4;
        border-radius: 5px;
      }
      #goodsMsgVessels{
        width: 614px;
        float: left;
        padding: 30px 20px;
        h3{
          height: 60px;
        }
        #description{
          color: #999;
          font-size: 15px;
        }
        .area{
          margin-top: 10px;
        }
        .desArea{
          margin-top: 10px;
        }
        .addressShow{
          margin-top: 10px;
          color: #999;
          font-size: 14px;
        }
        .sell-info{
          width: 100%;
          margin-top: 30px;
          .price{
            display: inline-block;
            margin-right: 10px;
            font-size: 24px;
            line-height: 24px;
            color: #FF4C44;
          }
          .other{
            margin-top: 15px;
            span{
              margin-right: 30px;
              font-size: 14px;
            }
          }
        }
        #goodsNumber{
          width: 100%;
          margin-top: 30px;
          #buyBtn{
            display: inline-block;
            width: 80px;
            border-radius: 4px;
            background: #FFB31A;
            color: #fff;
            font-size: 15px;
            line-height: 34px;
            text-align: center;
            height: 34px;
            float: left;
            margin-left: 30px;
            cursor: pointer;
          }
          #numberVessels{
            display: inline-block;
            float: left;
            border: 1px solid #E5E3DF;
            border-radius: 4px;
            overflow: hidden;
            a{
              display: inline-block;
              width: 34px;
              height: 34px;
              text-align: center;
              line-height: 32px;
              vertical-align: top;
              font-size: 15px;
              background: #f8f8f8;
              color: #FFB31A;
              text-decoration: none;
              cursor: pointer;
            }
            input{
              display: inline-block;
              width: 56px;
              height: 34px;
              line-height: 34px;
              vertical-align: top;
              font-size: 15px;
              border-left: 1px solid #E5E3DF;
              border-right: 1px solid #E5E3DF;
              text-align: center;
              outline: none;
              border-top: none;
              border-bottom: none;
            }
          }
        }
      }
    }
    #goodsDetailsMsg{
      width: 100%;
      margin-top: 60px;
      h3{
        text-align: center;
        font-size: 20px;
        line-height: 20px;
        font-weight: bold;
        margin-bottom: 40px;
      }
    }
  }
  #comment{
    width: 690px;
    height: auto;
    margin: 20px 0 0 0;
    border-top: 1px solid #E5E3DF;
    padding-top:20px;
    text-align: right;
    .comment-text{
      width: 100%;
      overflow: hidden;
      height: auto;
      margin: 20px 0;
      img{
        float: left;
        width: 30px;
        height: 30px;
        margin: 10px 10px 0 0;
        border-radius: 50%;
        object-fit: cover;
      }
      textarea{
        width: 648px;
        height: 112px;
        resize: none;
        padding: 12px;
        border: 1px solid #E5E3DF;
        border-radius: 4px;
        float:left;
      }
    }
    h3{text-align: left}
    button{
     color:#FFB31A;
     right: 0;margin-top: 10px;
     border-radius: 4px;
     height:34px;
     width:104px;
     text-align:center;
     line-height:34px;
     font-size: 15px;
     border:1px solid #FFB31A;
     background-color: #fff;
     &:hover{
       cursor: pointer;
     }
    }
  }
  .addAddress{
    color: #999;
    margin-left: 20px;
    &:hover{
      cursor: pointer;
      color: #FFB31A;
    }
  }
</style>
